<template>
  <a-layout style="min-height: 100vh; background: #fff">
    <a-layout-sider
      v-model:collapsed="collapsed"
      collapsible
      style="background: #f5f5f5; border-right: 5px solid #f5f5f5"
      theme="light"
    >
      <div class="logo" />
      <a-menu theme="light" v-model:selectedKeys="selectedKeys" mode="inline">
        <a-sub-menu key="sub1">
          <template #title>
            <span>
              <FireOutlined />
              <span>选项</span>
            </span>
          </template>
          <a-menu-item key="3">现在购买！</a-menu-item>
          <a-menu-item key="4">新的！</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <template #title>
            <span>
              <team-outlined />
              <span>收集</span>
            </span>
          </template>
          <a-menu-item key="6"> </a-menu-item>
          <a-menu-item key="7"> </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub3">
          <template #title>
            <span>
              <team-outlined />
              <span>正在打折</span>
            </span>
          </template>
          <a-menu-item key="8"> </a-menu-item>
          <a-menu-item key="9"> </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-content style="background: #fff">
        <a-row :gutter="[16, 8]">
          <a-col v-for="item in page" :key="item.picId" :span="24 / 4">
            <a-card hoverable style="width: 240px">
              <template #cover>
                <img :alt="example" :src="item.url" />
              </template>
              <a-card-meta :title="item.title">
                <template #description>{{ item.describe }}</template>
              </a-card-meta>
            </a-card>
          </a-col>
        </a-row>
      </a-layout-content>
      <a-layout-footer style="background: #fff; text-align: center">
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script>
import {
  FireOutlined,
  PieChartOutlined,
  DesktopOutlined,
  UserOutlined,
  TeamOutlined,
  FileOutlined,
} from "@ant-design/icons-vue";
import { defineComponent, ref } from "vue";
export default defineComponent({
  components: {
    PieChartOutlined,
    DesktopOutlined,
    UserOutlined,
    TeamOutlined,
    FileOutlined,
    FireOutlined,
  },
  setup() {
    const value = ref("");
    return {
      value,
    };
  },

  data() {
    return {
      collapsed: ref(false),
      selectedKeys: ref(["1"]),
      page: ref([
        {
          picId: 1,
          title: "标题",
          describe: "描述",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 2,
          title: "标题",
          describe: "描述",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 3,
          title: "标题",
          describe: "描述",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 4,
          title: "标题",
          describe: "描述",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 5,
          title: "标题",
          describe: "描述",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 6,
          title: "标题",
          describe: "描述",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 7,
          title: "标题",
          describe: "描述",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 8,
          title: "标题",
          describe: "描述",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 9,
          title: "标题",
          describe: "描述",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 10,
          title: "标题",
          describe: "描述",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 11,
          title: "标题",
          describe: "描述",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
        {
          picId: 12,
          title: "标题",
          describe: "描述",
          url: "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png",
        },
      ]),
    };
  },
});
</script>
<style>
</style>